<template>
    <!-- 说明：代码中框住的部分为编辑表格逻辑，一般不需要修改，如： -->
    <!-- //-- 可编辑表格 -- global -->
    <!-- //--------------- global -->

    <div>
        <div class="panel">
            <div class="panel-head">
                <div class="panel-head-l">可编辑表格(整表)</div>
            </div>
            <div class="panel-body">
                <el-form>
                    <el-form-item>
                        <el-button type="primary"
                                   @click="fGetDataClick">获取数据(控制台中查看)</el-button>
                    </el-form-item>
                </el-form>

                <el-form class="moduleform"
                         ref="edittableForm"
                         label-width="0"
                         :model="oForm">
                    <el-table class="moduletable"
                              :data="aList"
                              stripe>
                        <el-table-column type="index"
                                         label="序号"
                                         align="center"
                                         width="70">
                        </el-table-column>
                        <el-table-column prop="name"
                                         label="姓名"
                                         align="center">
                            <template v-slot="{row,$index}">
                                <el-form-item :prop="'list.'+$index+'.name'"
                                              :rules="oRules.name">
                                    <el-input v-model="row.name"></el-input>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column prop="age"
                                         label="年龄"
                                         align="center">
                            <template v-slot="{row,$index}">
                                <el-form-item :prop="'list.'+$index+'.age'"
                                              :rules="oRules.age">
                                    <el-input v-model="row.age"></el-input>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column prop="comments"
                                         label="备注"
                                         align="center">
                            <template v-slot="{row,$index}">
                                <el-form-item :prop="'list.'+$index+'.comments'"
                                              :rules="oRules.comments">
                                    <el-input v-model="row.comments"></el-input>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作"
                                         align="center">
                            <template v-slot="oItem">
                                <!-- 操作列中的 el-form-item 的作用是保持所有行高统一 -->
                                <el-form-item>
                                    <el-button plain
                                               icon="el-icon-delete"
                                               type="danger"
                                               @click="fEditTableBtnClick('delete',oItem)"></el-button>
                                </el-form-item>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-form-item>
                        <el-button class="com-edittable-addbtn"
                                   icon="el-icon-plus"
                                   @click="fAddRowClick">新增一行</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    const oDefaultRow = { name: '', age: '', comments: '' };//新增行的默认数据

    export default {
        data() {
            const fGetValidateRule = this.$WIV.fGetValidateRule; //获取验证工厂函数

            return {
                oRules: {//编辑表格中的行验证规则
                    name: [
                        fGetValidateRule('required')
                    ],
                    age: [
                        fGetValidateRule('int'), fGetValidateRule('numberRange', [10, undefined])
                    ]
                },
                //-- 可编辑表格 -- data
                aList: [],//列表数据
                //--------------- data
            }
        },
        computed: {
            //-- 可编辑表格 -- computed
            oForm() {
                return {
                    list: this.aList
                }
            },
            //--------------- computed
        },
        mounted() {
            this.fRequestList();//请求列表数据
        },
        methods: {
            //-- 可编辑表格 -- methods 代码段在页面中不需要修改（除文字描述）
            //事件：新增一行
            fAddRowClick() {
                //新增行加在表格结尾
                this.aList.push(JSON.parse(JSON.stringify(oDefaultRow)));
            },
            //事件：编辑表格的操作按钮点击
            fEditTableBtnClick(sType, oData) {
                switch (sType) {
                    case 'delete': //删除某行
                        this.aList.splice(oData.$index, 1);
                        break;
                }
            },
            //--------------- methods
            //事件：获取数据按钮点击
            fGetDataClick() {
                //保存前验证当前编辑数据
                this.$refs.edittableForm.validate().then(() => {
                    console.log('验证通过', this.aList);
                });
            },
            //请求列表数据
            fRequestList() {
                //列表数据赋值
                this.aList = [
                    { name: '1', age: '18', comments: '11111111111' },
                    { name: '2', age: '20', comments: '22222222222' },
                ];
            },
        }
    }
</script>

<style lang="less" rel="stylesheet" scoped>
</style>
